<template>
    <div class="main settle-payment-list">
        <section>
            <div class="btn-block">
                <el-button type="success" plain size="small" @click="exportPaymentBillList">导出付款单</el-button>
            </div>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="82px">
                <input type="text" style="display: none"/>
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="结算单号：" prop="settle_no">
                            <el-input @keyup.enter.native="search" v-model="listQuery.settle_no" placeholder="结算单号" maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="付款单号：" prop="pay_no">
                            <el-input @keyup.enter.native="search" v-model="listQuery.pay_no" placeholder="结算单号" maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="商家名称：" prop="account_id">
                        <el-select :filterable="true" v-model="listQuery.account_id" :clearable="true">
                            <el-option v-for="item in shopSelect" :key="item.id" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="审核状态：" prop="audit_status">
                        <el-select v-model="listQuery.audit_status" :clearable="true">
                            <el-option v-for="item in auditStatus" :key="item.id" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="账单周期：" prop="settle_date">
                        <el-date-picker value-format='yyyy-MM' v-model="listQuery.settle_date" type="month" placeholder="选择月"></el-date-picker>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <el-table type="selection" @selection-change="selectionChange" :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column align="center" prop="settleNo" label="结算单号" min-width="100"></el-table-column>
                <el-table-column align="center" prop="payNo" label="付款单号" min-width="100"></el-table-column>
                <el-table-column align="center" prop="merchantName" label="商家名称" min-width="100"></el-table-column>
                <el-table-column align="center" prop="settleDate" label="账单周期" min-width="100">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.settleDate, 'YYYY-MM-DD')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="settleAmount" label="付款金额" min-width="100"></el-table-column>
                <el-table-column align="center" prop="auditStatus" label="状态" :formatter="auditStatusFormat" min-width="100"></el-table-column>
                <el-table-column align="center" prop="applyTime" label="申请时间" min-width="100">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.applyTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="payTime" label="付款时间" min-width="100">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.payTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="" label="操作" width="220" fixed="right">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="operate(scope.row.settleNo, scope.row.accountId)" plain>查看</el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.page_size"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>

<script>
  import { getShopSelectList } from '@/api/merchantsys/goods'
  import { getPaymentList, exportPaymentBill } from '@/api/merchantsys/settle'
    export default {
        name: 'priceList',
        data() {
            return {
                shopSelect:[],
                auditStatus: [
                    { label: '全部', value: null },
                    { label: '审核中', value: 1 },
                    { label: '审核驳回', value: 2 },
                    { label: '审核通过', value: 3 },
                    { label: '已付款', value: 4 }
                ],
                list: [],
                listQuery: {
                    settle_date: '',
                    account_id:'',
                    settle_no: '',
                    pay_no: '',
                    audit_status: '',
                    page: 1,
                    page_size: 10
                },
                pList: [],
                listTotal: 0,
                listLoading: false,
                loading: false,
                payNos: []
            }
        },
        created() {
            this.fetchShopSelectList()
            this.getList()
        },
        methods: {
            //选择要导出的具体数据
            selectionChange(item) {
                this.payNos = []
                item.map(k => {
                    this.payNos.push(k.payNo)
                })
            },
            exportPaymentBillList(){
                exportPaymentBill({
                    payNos: this.payNos,
                    settleNo: this.listQuery.settle_no,
                    payNo: this.listQuery.pay_no,
                    accountId: this.listQuery.account_id,
                    auditStatus: this.listQuery.audit_status,
                    settleDate: this.listQuery.settle_date
                }).then(res=>{
                    this.downloadFile(res, '商家付款单.xlsx')
                })
            },
            auditStatusFormat(row) {
                return ['-', '审核中', '审核驳回', '审核通过', '已付款'][row.auditStatus]
            },
            operate(settleNo, accountId) {
                this.$router.push({ path: '/settle/payment/detail/' + settleNo+"/"+accountId })
            },
            modify(processId) {
                this.$router.push({ path: '/goods/base/modify/' + processId })
            },
            //商家下拉列表
            fetchShopSelectList() {
                getShopSelectList().then(res => {
                    if (res.code == 200 && res.data) {
                        res.data.forEach(element => {
                            this.shopSelect.push({ label: element.merchantName, value: element.accountId })
                        })
                    }
                })
            },
            //请求商家列表数据
            getList() {
                this.listLoading = true;
                console.log(this.listQuery)
                getPaymentList(this.listQuery).then(res => {
                    this.list = res.data.data;
                    this.listTotal = res.data.total;
                    this.listLoading = false;
                }).catch(err => {
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                })
            },
            // 清空搜索条件
            resetForm (formName) {
                this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                })
            },
            // 搜索
            search() {
                this.listQuery.page = 1;
                this.getList();
            },
            //切换每页条数
            handleSizeChange (value) {
                this.listQuery.page_size = value;
                this.getList()
            },
            // 切换分页
            handleCurrentChange(page) {
                this.listQuery.page = page;
                this.getList();
            }
        }
    }
</script>

<style lang="scss">
  
</style>
